<template>
  <view>
    <u-sticky bgColor="#fff">
      <u-tabs
        :activeStyle="{ color: '#FF9933', fontWeight: 'bold', fontSize: '35rpx' }"
        :scrollable="false"
        lineColor="#FF9933"
        :list="list2"
      ></u-tabs>
    </u-sticky>
    <view class="order-list">
      <view class="order-item" v-for="(order, index) in orderList" :key="index">
        <view class="order-header">
          <text class="order-id">订单号：{{ order.id }}</text>
          <text
            class="order-status"
            :class="{
              'status-pending': order.status === '待付款',
              'status-paid': order.status === '已付款',
              'status-refund': order.status === '退款',
            }"
            >{{ order.status }}</text
          >
        </view>
        <view class="order-content">
          <u--image :src="order.image" width="120px" height="80px" radius="8rpx"></u--image>
          <view class="order-info">
            <view class="order-title">{{ order.title }}</view>
            <view class="order-price">售价：{{ order.price }}</view>
            <view class="order-time">下单时间：{{ order.time }}</view>
          </view>
        </view>
        <view class="order-actions">
          <!-- <u-button type="primary" size="mini" @click="viewDetail(order)">查看详情</u-button>
          <u-button type="warning" size="mini" @click="cancelOrder(order)" v-if="order.status === '待付款'"
            >取消订单</u-button
          > -->
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list2: [
        {
          name: "全部订单",
        },
        {
          name: "待付款",
        },
        {
          name: "已付款",
        },
        {
          name: "退款",
        },
      ],
      orderList: [
        {
          id: "202310010001",
          image:
            "https://images.unsplash.com/photo-1631049552057-403cdb8f0658?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",
          title: "出售县城三室两厅两卫118平米 售价100万",
          price: "100万",
          status: "待付款",
          time: "2023-10-01 10:00",
        },
        {
          id: 2,
          image:
            "https://images.unsplash.com/photo-1600585154360-1c1c1c1c1c1c?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",
          title: "出租市中心两室一厅80平米，租金3000元/月",
          price: "3000元/月",
          status: "已付款",
          time: "2023-10-01 10:00",
        },
        {
          id: 3,
          image:
            "https://images.unsplash.com/photo-1517841905240-4729888e3b1e?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",
          title: "出售市郊四室两厅220平米，售价150万",
          price: "150万",
          status: "退款",
          time: "2023-10-01 10:00",
        },
        {
          id: 1,
          image:
            "https://images.unsplash.com/photo-1631049552057-403cdb8f0658?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",
          title: "出售县城三室两厅两卫118平米 售价100万",
          price: "100万",
          status: "待付款",
          time: "2023-10-01 10:00",
        },
        {
          id: 1,
          image:
            "https://images.unsplash.com/photo-1631049552057-403cdb8f0658?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",
          title: "出售县城三室两厅两卫118平米 售价100万",
          price: "100万",
          status: "待付款",
          time: "2023-10-01 10:00",
        },
        {
          id: 1,
          image:
            "https://images.unsplash.com/photo-1631049552057-403cdb8f0658?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",
          title: "出售县城三室两厅两卫118平米 售价100万",
          price: "100万",
          status: "待付款",
          time: "2023-10-01 10:00",
        },
        {
          id: 1,
          image:
            "https://images.unsplash.com/photo-1631049552057-403cdb8f0658?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",
          title: "出售县城三室两厅两卫118平米 售价100万",
          price: "100万",
          status: "待付款",
          time: "2023-10-01 10:00",
        },
        {
          id: 1,
          image:
            "https://images.unsplash.com/photo-1631049552057-403cdb8f0658?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",
          title: "出售县城三室两厅两卫118平米 售价100万",
          price: "100万",
          status: "待付款",
          time: "2023-10-01 10:00",
        },
        {
          id: 1,
          image:
            "https://images.unsplash.com/photo-1631049552057-403cdb8f0658?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",
          title: "出售县城三室两厅两卫118平米 售价100万",
          price: "100万",
          status: "待付款",
          time: "2023-10-01 10:00",
        },
        {
          id: 1,
          image:
            "https://images.unsplash.com/photo-1631049552057-403cdb8f0658?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",
          title: "出售县城三室两厅两卫118平米 售价100万",
          price: "100万",
          status: "待付款",
          time: "2023-10-01 10:00",
        },
        {
          id: 1,
          image:
            "https://images.unsplash.com/photo-1631049552057-403cdb8f0658?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",
          title: "出售县城三室两厅两卫118平米 售价100万",
          price: "100万",
          status: "待付款",
          time: "2023-10-01 10:00",
        },
        {
          id: 1,
          image:
            "https://images.unsplash.com/photo-1631049552057-403cdb8f0658?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",
          title: "出售县城三室两厅两卫118平米 售价100万",
          price: "100万",
          status: "待付款",
          time: "2023-10-01 10:00",
        },
        {
          id: 1,
          image:
            "https://images.unsplash.com/photo-1631049552057-403cdb8f0658?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",
          title: "出售县城三室两厅两卫118平米 售价100万",
          price: "100万",
          status: "待付款",
          time: "2023-10-01 10:00",
        },
      ],
    };
  },
  methods: {
    viewDetail(order) {
      console.log("查看详情", order);
    },
    cancelOrder(order) {
      console.log("取消订单", order);
    },
    getStatusClass(status) {
      switch (status) {
        case "待付款":
          return "status-pending";
        case "已付款":
          return "status-paid";
        case "退款":
          return "status-refund";
        default:
          return "";
      }
    },
  },
};
</script>

<style lang="scss">
.order-list {
  padding: 20rpx;
   
}
.order-item {
  background: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  // box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}
.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}
.order-id {
  font-size: 24rpx;
  color: #666;
}
.order-status {
  font-size: 24rpx;
  &.status-pending {
    color: #ff9933; /* 待付款 */
  }
  &.status-paid {
    color: #67c23a; /* 已付款 */
  }
  &.status-refund {
    color: #f56c6c; /* 退款 */
  }
}
.order-content {
  display: flex;
  align-items: center;
}
.order-info {
  flex: 1;
  margin-left: 20rpx;
}
.order-title {
  font-size: 28rpx;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 400rpx;
}
.order-price {
  font-size: 24rpx;
  color: #ff9933;
  margin-top: 10rpx;
}
.order-time {
  font-size: 22rpx;
  color: #909399;
  margin-top: 10rpx;
}
.order-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 20rpx;
}
</style>
